<template>
  <view
    class="login-wrapper flex-col flex-center-y" v-if="type=='register'">
    <!-- <view class="logo-icon">
      <image :src="logoUrl" mode="widthFix"></image>
    </view> -->
    
    <!-- 不是app 显示输入框登录 -->
    <view class="whiteBg" >
      <view class="list" >
        <form @submit.prevent="submit">
          <view class="item">
            <view class="acea-row row-middle">
              
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="/static/images/prefix-phone.png"
                ></image>
              </view>
              <input
                type="number"
                class="texts"
                placeholder="输入手机号码"
                v-model="phone"
                maxlength="11"
                required
              />
            </view>
          </view>
          <view class="item">
            <view class="acea-row row-middle">
              <view class="input-prefix-image">
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    src="/static/images/prefix-password.png"></image>
                </view>
              </view>
              <input
                :type="passwordHide ? `password` : `text`"
                class="texts"
                placeholder="填写登录密码"
                maxlength="18"
                v-model="password"
                style="padding-left: 0"
                required
              />
              <view class="input-append-image">
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    v-if="passwordHide"
                    @click="passwordHide = false"
                    src="https://www.alizaozao.com/static/6ed7c4f9ec754af1a52e78931a167e61z23zlsd627.png"
                  ></image>
                  <image
                    mode="widthFix"
                    v-if="!passwordHide"
                    @click="passwordHide = true"
                    src="https://www.alizaozao.com/static/841f033b84f34053a3905046f1f6098e2qx3tfvpxv.png"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </form>
      </view>
      
      <!-- <view class="protocol acea-row row-between-wrapper">
        <checkbox-group
          class="checkgroup acea-row"
          @change="isAgree = !isAgree"
          style="align-items: end"
        >
          <checkbox class="checkbox" :checked="isAgree ? true : false" />
          <text class="protocol_text"
            >我已阅读并同意<text @click="userAgree" class="font_pro"
              >《用户协议》</text
            ></text
          >
        </checkbox-group>

        <text class="forget-password" v-if="current == 0" @click="forgePassword"
          >找回密码</text
        >
      </view> -->
      <view class="logon" @click="submit">登录</view>

      
    </view>
    
    <view class="bottom"></view>
   
  </view>
</template>
<script>
import {mpStaffAutoLogin,register} from '@/api/connect.js'
  import storage from "@/utils/storage.js";
const BACK_URL = "login_back_url";
export default {
  name: "Login",
  components: {
  },
  data: function () {
    return {
      getHeight: this.getWXStatusHeight(),

      isAgree: false,
      passwordHide: true, // 密码是否隐藏
      current: 1,
      phone: "",
      password: "",
      openid:"",
      captcha: "",
      formItem: 1,
      type: "login",
      code:"",
    };
  },
  watch: {
  },
  mounted () {
    let that = this;
    //获取code
    uni.login({
    	success: (res) => {
    		console.log("code", res.code);
    		that.code = res.code;
    		that.login(that.code);
    	},
    });
    
   
  },
  onLoad() {
    

    
  },
  methods: {
    submit(){
      let that = this;
      if (!that.phone){
        return uni.showToast({
        	title:"请填写手机号码",
        	duration:2000,
        	icon:"none"
        })
      }
        
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)){
        return uni.showToast({
        	title:"请输入正确的手机号码",
        	duration:2000,
        	icon:"none"
        })
      }
      
      
      if (!that.password){
        return uni.showToast({
        	title:"请输入密码",
        	duration:2000,
        	icon:"none"
        })
      }
      let params={
        mobile:that.phone,
        password:that.password,
        openid:that.openid
      }
      register(params).then((res)=>{
        if(res.data.code==0){
          storage.setStaffAccessToken(res.data.data.accessToken);
        	uni.navigateBack({
        		delta: 1,
        	});
        }else{
        	uni.showToast({
        		title:res.data.msg,
        		duration:2000,
        		icon:"none"
        	})
        }
      })
    },
		async login(code){
			let res = await mpStaffAutoLogin({
				auth_code:code
			});
			if(res.data.code==0){
        this.type=res.data.data.type
        this.openid=res.data.data.openid;
        if(this.type=="login"){
          storage.setStaffAccessToken(res.data.data.accessToken);
          uni.navigateBack({
          	delta: 1,
          });
        }
				// console.log("login",res);
				// storage.setAccessToken(res.data.accessToken);
				// storage.setHasLogin(true);
				
				// uni.navigateBack({
				// 	delta: 1,
				// });
			}else{
				uni.showToast({
					title:"登录失败",
					duration:2000,
					icon:"none"
				})
			}
		},	
    getWXStatusHeight() {
      // 获取距上
      const barTop = uni.getSystemInfoSync().statusBarHeight;
      // #ifdef MP
      // 获取胶囊按钮位置信息
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect() || 0;
      // 获取导航栏高度
      const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2;
      let barWidth = menuButtonInfo.width;
      // #endif
      // #ifndef MP
      // 获取导航栏高度
      const barHeight = parseInt(barTop) + 10;
      let barWidth = "100%";
      // #endif
      return {
        barHeight,
        barTop,
        barWidth,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.code {
  padding:18rpx;
}
$theme-color: #003b99;
.btn-auth {
	width: 698rpx;
	height: 94rpx;
	background: #0BB9F0;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #FFFFFF;
	margin-top: 100rpx;
}
.login-popup-box {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	position: relative;
	padding-bottom: 100rpx;
}
.input-box {
	width: 654rpx;
	height: 89rpx;
	border-radius: 305rpx;
	border: 1rpx solid #0BB9F0;

	.mobile {
		height: 89rpx;
		margin-left: 20rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.verification-input {
		height: 89rpx;
		margin-left: 20rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		width: 420rpx;
	}

	.verification-text {
		padding-left: 20rpx;
		box-sizing: border-box;
		width: 200rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #419CFB;
	}

	.line {
		width: 0rpx;
		height: 45rpx;
		border: 2rpx solid rgba(12, 183, 240, 0.5);
	}
}

.popup-box {
	width: 420rpx;
	min-height: 400rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx;
	background: #fff;
	border-radius: 20rpx;

	.title {
		font-size: 40rpx;
		font-weight: 600;
		margin-top: 26rpx;
	}

	.content {
		font-size: 30rpx;
		margin: 20rpx 0;
		text-align: center;
	}

	.btn-box,
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;

		.btn-one {
			width: 300rpx;
			height: 76rpx;
			background: $uni-color-primary;
			color: #fff;
			border-radius: 38rpx;
		}

		.btn-two {
			width: 206rpx;
			height: 76rpx;
			border-radius: 38rpx;
			margin: 0 20rpx;
			background: #fff;
		}
	}
}
.navbar {
  position: fixed;
  left: 0;
  right: 0;
  padding-left: 30upx;
}
.appLogin {
  margin-top: 60rpx;

  .hds {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #666666;

    .line {
      width: 68rpx;
      height: 1rpx;
      background: #666666;
    }

    p {
      margin: 0 20rpx;
    }
  }

  .btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    // gap: 30upx;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 15upx;
    }

    .apple-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 30rpx;
      background: #000;
      border-radius: 34rpx;
      font-size: 40rpx;

      .icon-s-pingguo {
        color: #fff;
        font-size: 40rpx;
      }
    }

    .iconfont {
      font-size: 40rpx;
      color: #fff;
    }
  }
}



.code img {
  width: 100%;
  height: 100%;
}

.acea-row.row-middle {
  input {
    margin-left: 20rpx;
    display: block;
  }
}

.login-wrapper {
  padding: 30rpx;
  background-size: 100% auto !important;
  width: 100vw;
  height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  background: url('https://www.alizaozao.com/static/mobileLoginBg.png');
  background-size: 100% 100%;
  .logo-icon {
    position: absolute;
    width: 256upx;
    height: 256upx;
    overflow: hidden;
    top: 20vh;
    image {
      width: 100%;
    }
  }

  .whiteBg {
    margin-top: auto;
    width: 650upx;
    // margin-bottom: 212upx;
    margin-top: 45vh;
    flex: 1;
    .list {
      .item {
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 20upx;
        &:last-child {
          margin-bottom: 0;
        }
        .input-prefix-image,
        .input-append-image {
          width: 80rpx;
          height: 80rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .row-middle {
          position: relative;
          padding: 8upx;
          // padding-right: 45upx;

          .texts {
            flex: 1;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            margin-left: 8upx;
            // #ifdef MP
            justify-content: flex-start;
            // #endif

            &:focus-visible {
              outline: none;
            }
          }
          .codeIput {
            margin-left: 8upx;
            // #ifdef MP
            justify-content: flex-start;
            // #endif
          }

          input {
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .code {
            position: absolute;
            right: 30rpx;
            top: 50%;
            color: $theme-color;
            font-size: 26rpx;
            transform: translateY(-50%);
            background: transparent;
          }
        }
      }
    }

    .logon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 86rpx;
      margin-top: 50rpx;
      background-color: $theme-color;
      color: #ffffff;
      font-size: 30rpx;
      border-radius: 16upx;
    }

    .tips {
      margin: 30rpx;
      text-align: center;
      color: #999;
    }
    .protocol {
      margin-top: 50upx;

      ::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
        background: $theme-color !important;
        border-color: $theme-color !important;
      }

      .forget-password {
        font-size: 26upx;
        color: $theme-color;
      }
    }

    .protocol_text {
      .font_pro {
        color: $theme-color;
      }
    }

    // &.is-app-screen {
    //   margin-bottom: 342upx;
    // }
    .login-button-group {
      width: 100%;
      .login-button {
        width: 100%;
        height: 96upx;
        border-radius: 16upx;
        font-size: 32rpx;
        color: #ffffff;
        background: $theme-color;
        margin-bottom: 32upx;
        &:last-child {
          margin-bottom: 0;
        }
        &.wechat {
          background: #08ba5c;
        }
        .button-prefix {
          width: 80upx;
          height: 80upx;
          margin-right: 8upx;
          image {
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
        }
      }
    }
  }

  .copyright {
    width: 242rpx;
    overflow: hidden;
    margin-bottom: 78upx;
    min-height: 109upx;
    align-items: flex-end;
    image {
      width: 100%;
      height: auto;
    }
  }
}
</style>
